import React from 'react';
import './style.css';

const ErrorModal = ({ visible, onClose, title, error, validationResult }) => {
  if (!visible) return null;

  const handleOverlayClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  const handleKeyDown = (e) => {
    if (e.key === 'Escape') {
      onClose();
    }
  };

  React.useEffect(() => {
    if (visible) {
      document.addEventListener('keydown', handleKeyDown);
      // 防止背景滚动
      document.body.style.overflow = 'hidden';
    }
    
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
      document.body.style.overflow = 'unset';
    };
  }, [visible]);

  return (
    <div className="error-modal-overlay" onClick={handleOverlayClick}>
      <div className="error-modal">
        <div className="error-modal-header">
          <div className="error-modal-title">
            <span className="error-icon">❌</span>
            <h3>{title || '文件上传失败'}</h3>
          </div>
          <button 
            className="error-modal-close" 
            onClick={onClose}
            aria-label="关闭"
          >
            ✕
          </button>
        </div>

        <div className="error-modal-content">
          {error && (
            <div className="error-main-message">
              <p>{error}</p>
            </div>
          )}

          {validationResult?.errors?.length > 0 && (
            <div className="error-details">
              <h4 className="error-section-title">错误详情:</h4>
              <ul className="error-list">
                {validationResult.errors.map((errorMsg, index) => (
                  <li key={index} className="error-item">
                    <span className="error-bullet">•</span>
                    {errorMsg}
                  </li>
                ))}
              </ul>
            </div>
          )}

          {validationResult?.warnings?.length > 0 && (
            <div className="warning-details">
              <h4 className="warning-section-title">警告信息:</h4>
              <ul className="warning-list">
                {validationResult.warnings.map((warning, index) => (
                  <li key={index} className="warning-item">
                    <span className="warning-bullet">•</span>
                    {warning}
                  </li>
                ))}
              </ul>
            </div>
          )}

          <div className="error-help-text">
            <p>💡 <strong>解决建议:</strong></p>
            <ul>
              <li>检查JSON文件格式是否正确</li>
              <li>确保数据结构符合要求：包含series数组</li>
              <li>验证每个数据点都有x和y字段</li>
              <li>x值可以是数字或字符串，y值必须是数字</li>
              <li>可以下载示例文件作为参考</li>
            </ul>
          </div>
        </div>

        <div className="error-modal-footer">
          <button 
            className="error-modal-button error-modal-button-primary" 
            onClick={onClose}
          >
            确定，重新上传
          </button>
        </div>
      </div>
    </div>
  );
};

export default ErrorModal; 